<template>
	<view class="gold">
		<!-- 头部 -->
		<view class="head">
			<view class="goldPrice">
				<view class="goldPriceMoney">
					<text>367.70</text>
				</view>
				<text class="newGoldPriceMoney">最新金价(元/克)</text>
			</view>
			<view class="goldDetails">
				<view class="goldDetailsLeft">
					<view class="RiseAndFall">
						<text>-0.72</text>
					</view>
					<text class="newGoldPriceMoney">今日涨跌幅</text>
				</view>
				<view class="goldDetailsRight">
					<view class="purchase">
						<text>500</text>
					</view>
					<text class="newGoldPriceMoney">起购价格</text>
				</view>
			</view>
		</view>
		<!-- 主体 -->
		<view class="content">
			<view class="goldMovements">
				<text class="goldMovementsText">金价走势</text>
				<image src="../../../static/gold/right.png" class="goldMovements-img"></image>
			</view>
			<!-- 折线图 -->
			<view class="goldCharts">
				<view class="charts-box">
					<qiun-data-charts type="gold" :chartData="chartData" background="none" />
				</view>
				<view class="charts-text">
					<text class="charts-classify" @tap='changeChartsText("分时")' :class="{'charts-classify-active':chartsText=='分时'?'charts-classify-active':''}">分时</text>
					<text class="charts-classify" @tap='changeChartsText("近一月")' :class="{'charts-classify-active':chartsText=='近一月'?'charts-classify-active':''}">近一月</text>
					<text class="charts-classify" @tap='changeChartsText("近半年")' :class="{'charts-classify-active':chartsText=='近半年'?'charts-classify-active':''}">近半年</text>
					<text class="charts-classify charts-lastclassify" @tap='changeChartsText("近一年")' :class="{'charts-classify-active':chartsText=='近一年'?'charts-classify-active':''}">近一年</text>
				</view>
			</view>

			<!-- 安全保障 -->
			<view class="goldMovements">
				<text class="goldMovementsText">安全保障</text>
			</view>

			<view class="goldMovements-content">
				<view class="goldMovements-top">
					<view class="G-introduce">
						<image src="../../../static/gold/order1.png" class="G-I-img"></image>
						<text class="G-I-text">知名金融机构</text>
					</view>
					<view class="G-introduce">
						<image src="../../../static/gold/order2.png" class="G-I-img"></image>
						<text class="G-I-text">精选优质产品</text>
					</view>
					<view class="G-introduce">
						<image src="../../../static/gold/order3.png" class="G-I-img"></image>
						<text class="G-I-text">监管机构备案</text>
					</view>
				</view>
				<view class="goldMovements-bottom">
					<text>本产品为民生银行推出的积存金产品，通过民生银行电子账户进行交易，黄金价格实时波动。产品风险等级为中等，不保证最低收益，投资风险由投资人本人承担</text>
				</view>
			</view>
			<!-- 切换 -->
			<view class="goldMovements-tab">
				<view class="G-T-Content" v-for="(item,index) in goldMovementsTab" :key="index">
					<text class="G-T-text" :class="{'G-T-Text-active':tabText==item?'G-T-Text-active':''}" @tap='changeTabText(item)'>{{item}}</text>
					<text class="G-T-Hr" :class="{'G-T-Hr-active':tabText==item?'G-T-Hr-active':''}"></text>
				</view>
			</view>

			<!-- 基本信息 -->
			<view class="basic-information">
				<view class="B-I-content">
					<text class="B-I-content-text B-I-content-text-active">基本信息</text>
				</view>
				<view class="B-I-content">
					<text class="B-I-content-text">产品名称</text>
					<view class="B-I-content-view">
						<text class="B-I-content-text1">民生积存金</text>
					</view>
				</view>
				<view class="B-I-content">
					<text class="B-I-content-text">发行机构</text>
					<view class="B-I-content-view">
						<text class="B-I-content-text1">中国民生银行股份有限公司</text>
					</view>
				</view>
				<view class="B-I-content">
					<text class="B-I-content-text">黄金价格</text>
					<view class="B-I-content-view">
						<text class="B-I-content-text1">由民生银行参考金交所AU99.99及境外价格提供商综合报价</text>
					</view>
				</view>
				<view class="B-I-content">
					<text class="B-I-content-text">风险等级</text>
					<view class="B-I-content-view">
						<text class="B-I-content-text1">中等</text>
					</view>
				</view>
			</view>

			<!-- 协议 -->
			<view class="agreement">
				<view class="agreement-content">
					<text class="agreement-text agreement-text-active">查看协议</text>
				</view>
				<view class="agreement-content">
					<text class="agreement-text">《客户协议》</text>
					<image src="../../../static/gold/right.png" class="goldMovements-img"></image>
				</view>
				<view class="agreement-content">
					<text class="agreement-text">《账户管理协议》</text>
					<image src="../../../static/gold/right.png" class="goldMovements-img"></image>
				</view>
				<view class="agreement-content">
					<text class="agreement-text">《民生协议跨行通协议》</text>
					<image src="../../../static/gold/right.png" class="goldMovements-img"></image>
				</view>
				<view class="agreement-content">
					<text class="agreement-text">《个人税收声明》</text>
					<image src="../../../static/gold/right.png" class="goldMovements-img"></image>
				</view>
				<view class="agreement-content">
					<text class="agreement-text">《账户即时通协议》</text>
					<image src="../../../static/gold/right.png" class="goldMovements-img"></image>
				</view>
			</view>
		</view>
		<!-- 按钮 -->
		<view class="gold-btn">
			<view class="gold-Baybtn" @click="goPurchaseTerms">立即购买</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				chartsText:'近一月',
				tabText:'信息披露',
				goldMovementsTab:['交易规则','信息披露','常见问题'],
				chartData: {
					"categories": [
						"2016",
						"2017",
						"2018",
						"2019",
						"2020",
						"2021"
					],
					"series": [{
						"name": "成交量A",
						"data": [
							35,
							8,
							25,
							37,
							4,
							20
						]
					}]
				}
			}
		},
		onLoad() {
			const goldData = {
				"acceptRisk": 0,
				"age": 0,
				"balance": 0,
				"couponIds": "",
				"eml": "",
				"gmtCreate": "",
				"id": 0,
				"idcard": "",
				"idcardName": "",
				"integral": 0,
				"loginTime": "",
				"nickName": "",
				"password": "",
				"payPassword": "",
				"realName": "",
				"risk": 0,
				"salt": "",
				"sex": "",
				"signin": 0,
				"signinTime": "",
				"status": 0,
				"token": "",
				"username": "",
				"verificationCode": ""
			}
			uni.request({
				url: 'http://dev.woniulab.com:7689/sys/profit/gold',
				method: 'POST',
				data:goldData,
				success:res=>{
					console.log(res);
				}
				
			})
		},
		methods: {
			goPurchaseTerms() {
				uni.navigateTo({
					url: './goldPurchaseTerms'
				})
			},
			changeChartsText(data){
				this.chartsText=data;
			},
			changeTabText(data){
				this.tabText=data;
			}
		}
	}
</script>

<style scoped>
	* {
		box-sizing: border-box;
	}

	.gold {
		width: 100vw;
		/* height: 100vh; */
		background-image: url(../../../static/gold/bgc.png);
		background-repeat: no-repeat;
		background-size: 100vw;
	}

	/* 头部 */
	.head {
		width: 100vw;
		height: 340rpx;
	}

	.goldPrice {
		padding: 40rpx 280rpx;
		text-align: center;
	}

	.goldPriceMoney {
		font-size: 60rpx;
		color: #fff;
	}

	.newGoldPriceMoney {
		color: #fff;
		font-size: 24rpx;
	}

	.goldDetails {
		display: flex;

	}

	.goldDetailsLeft,
	.goldDetailsRight {
		flex-grow: 1;
		padding: 0rpx 100rpx;
		text-align: center;
	}

	.RiseAndFall,
	.purchase {
		color: #fff;
		font-size: 40rpx;
	}

	/* 主体 */
	.content {
		width: 100vw;
		padding: 24rpx;
		box-sizing: border-box;
		background-color: #fafafa;
		border-top-right-radius: 40rpx;
		border-top-left-radius: 40rpx;
		overflow: hidden;
	}

	.goldMovements {
		width: 100%;
		box-sizing: border-box;
		padding: 10rpx 0;
		line-height: 40rpx;
		margin-top: 20rpx;
		display: flex;
		background-color: #fafafa;
		justify-content: space-between;

	}

	.goldMovementsText {
		vertical-align: middle;
		height: 40rpx;
		padding-left: 10rpx;
		border-left: 10rpx solid #007AFF;
	}

	.goldMovements-img {
		width: 40rpx;
		height: 40rpx;
		vertical-align: middle;
	}

	/* 折线图 */
	.goldCharts {
		width: 100%;
		height: 570rpx;
		margin-top: 20rpx;
		border-radius: 10rpx;
		background-color: #fff;
	}

	.charts-box {
		width: 100%;
		margin-top: 20rpx;
		height: 444rpx;
	}

	.charts-text {
		width: 640rpx;
		margin: 40rpx auto;
		color: #9e9e9e;
		display: flex;
	}

	.charts-classify {
		display: inline-block;
		text-align: center;
		flex-grow: 1;
		padding: 10rpx 0;
		border: 1rpx solid #f3f3f3;
		border-right: none;
	}

	.charts-classify-active {
		background-color: #3476f1;
		color: white;
	}

	.charts-lastclassify {
		border-right: 1rpx solid #f3f3f3;
	}

	.goldMovements-content {
		width: 100%;
		box-sizing: border-box;
		margin-top: 20rpx;
		padding: 30rpx;
		background-color: #fff;
		color: #a8a8a8;
	}

	.goldMovements-top {
		display: flex;
		border-bottom: 5rpx solid #fbfbfb;
	}

	.G-introduce {
		flex-grow: 1;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		font-size: 24rpx;
	}

	.G-I-img {
		width: 90rpx;
		height: 90rpx;
	}

	.G-I-text {
		margin: 24rpx 0;
	}

	.goldMovements-bottom {
		font-size: 24rpx;
		margin-top: 20rpx;
	}

	.goldMovements-tab {
		width: 100%;
		height: 80rpx;
		color: #999999;
		line-height: 80rpx;
		display: flex;
		border-radius: 10rpx;
	}

	.G-T-Content {
		display: flex;
		flex-direction: column;
		align-items: center;
		box-sizing: border-box;
		margin-right: 60rpx;
	}

	.G-T-text {
		display: inline-block;
		width: 100rpx;
		font-size: 24rpx;
	}

	.G-T-Text-active {
		width: 120rpx;
		font-size: 30rpx;
		color: #699af4;
	}

	.G-T-Hr {
		width: 50rpx;
		height: 0;
	}

	.G-T-Hr-active {
		border: 5rpx solid #3476f1;
		border-radius: 5rpx;
	}

	/* 基本信息 */
	.basic-information,
	.agreement {
		width: 100%;
		/* height: 460rpx; */
		margin-top: 20rpx;
		background-color: #fff;
		border-radius: 10rpx;
	}

	.agreement {
		margin-bottom: 20rpx;
	}

	.B-I-content,
	.agreement-content {
		padding: 30rpx;
		font-size: 24rpx;
		display: flex;
		border-bottom: 1rpx solid #fbfbfb;
	}

	.agreement-content {
		justify-content: space-between;
	}

	.B-I-content-text {
		color: #999999;
		margin-right: 30rpx;
	}

	.B-I-content-text-active {
		font-size: 30rpx;
	}

	.agreement-text-active {
		font-size: 30rpx;
		color: #999999;
	}

	.B-I-content-view {
		width: 504rpx;
	}

	/* 按钮 */
	.gold-btn {
		margin-bottom: 30rpx;
	}

	.gold-Baybtn {
		height: 90rpx;
		color: #e6eefe;
		background-color: #3476f1;
		border-radius: 0;
		line-height: 90rpx;
		text-align: center;
	}
</style>
